<template>
  <div style="background-color: #f5f6f7; width: 958px" class="page-carousel">
    <div class="baseDiv">
      <el-form :model="addHomeLikeForm" :rules="rules" ref="addHomeLikeForm" class="addForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addHomeLikeForm.title" placeholder="请输入标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="sort">
          <el-select class="selectclass" v-model="addHomeLikeForm.sort" @change="getSortList"
                     clearable filterable placeholder="请选择序号">
            <el-option
              v-for="item in this.sortList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <edit-pic :roleType="this.roleType" :fromType="2" :headTitle="'上传轮播封面图'"
                :fileUrlsArray="this.imageFiles" :headSonTitle="'支持jpg,png,gif,bmp(最多选择1张)'"
                @getFileUrls="getFileUrls"></edit-pic>
      <div style="width:958px;border-bottom: 1px solid #e5e5e5;height: 30px;margin-top: 15px;">
       <span style="margin-left: 2px;">内容</span>
      </div>
      <div>
        <Uediter :value="addHomeLikeForm.content" :config="ueditor.config" ref="ue"></Uediter>
      </div>
    </div>
    <el-row class="btnFrameClass">
      <el-button class="singleBtnClass" @click="saveHomeLike('addHomeLikeForm')" type="primary">提交
      </el-button>
    </el-row>
  </div>
</template>
<script>
  import Uediter from '@/components/ueditor/UE.vue';
  import inputCom from 'components/input/baseTitleInput.vue';
  import fileUpload from 'components/fileUpload/file.vue';
  import editPic from './editPicture.vue';
  import {validateTips} from 'utils/tips';
  import searchSelect from 'components/search-select/searchSelect';

  export default {
    components: {
      inputCom,
      fileUpload,
      editPic,
      searchSelect,
      Uediter
    },
    props: {
      roleType: {
        type: Number
      },
      homeLinkId: {
        type: String
      },
      sort: {
        type: Number
      }
    },
    data() {
      return {
        isShowEditPicDialog: false,
        sortList: [], // 下拉搜索序号
        addHomeLikeForm: { // 表单数据
          id: '', // 主键
          title: '', // 标题
          sort: '', // 序号
          image: '', // 图片地址
          content: '' // 内容
        },
        imageFiles: [],
        ueditor: { // 富文本编辑
          value: '', // 默认文字
          config: {
            toolbars: [[// 工具条
              'fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
              'underline', 'fontborder', 'backcolor', 'fontsize', 'fontfamily',
              'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify',
              'strikethrough', 'superscript', 'subscript', 'removeformat',
              'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
              'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist',
              'selectall', 'cleardoc', 'link', 'unlink', 'emotion', 'insertimage', 'map'
            ]],
            initialFrameWidth: 958,
            initialFrameHeight: 250,
            autoHeightEnabled: false,
            scaleEnabled: true, // 设置不自动调整高度
            elementPathEnabled: false, // 删除元素路径
            wordCount: false    // 删除字数统计
          }
        },
        rules: {
          title: [
            {required: true, message: validateTips.HOME_LIKE_TITLE, trigger: 'blur'},
            {min: 0, max: 25, message: validateTips.LESS_25, trigger: 'blur'}
          ],
          sort: [
            {required: true, message: validateTips.HOME_LIKE_SORT, trigger: 'blur'}
          ]
        }
      };
    },
    created() {
      this.getHomeLikeInfo();
      this.getSortList(); // 获取轮播图序号
    },
    methods: {
      getHomeLikeInfo() {
        // 编辑执行
        if (this.$props.homeLinkId !== 0 && this.$props.homeLinkId !== undefined) {
          this.ajax({
            type: 'GET',
            url: '/ibs/web/homeLink/linkDetail/' + this.$props.homeLinkId,
            data: '',
            loading: true,
            success: (res) => {
              setTimeout(() => {
                this.$pcNProgress.done();
              }, 300);
              this.addHomeLikeForm = res.result;
              this.$refs.ue.setUEContent(res.result.content);
              if (res.result.image !== '') {
                let singleImg = {name: '', url: ''};
                singleImg.name = '封面图';
                singleImg.url = res.result.image;
                this.imageFiles.push(singleImg);
              }
            }
          });
        }
      },
      getSortList() {
        this.ajax({
          type: 'POST',
          url: '/ibs/web/homeLink/getUsedLink',
          data: '',
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.sortList = res.result;
            // 如果不为0 则是编辑
            if (this.$props.homeLinkId !== 0) {
              this.sortList.push(this.$props.sort);
            }
          }
        });
      },
      getFileUrls(titleImg, fileNameArr, fileUrlArr) {
        this.imageFiles = [];
        for (let i = 0; i < fileUrlArr.length; i++) {
          let singleImg = {name: '', url: ''};
          singleImg.name = fileNameArr[i];
          singleImg.url = fileUrlArr[i];
          this.imageFiles.push(singleImg);
          this.addHomeLikeForm.image = fileUrlArr[i];
        }
      },
      removeOtherPara (urlArray) {  // 移除url 数组 多出来的 uid status字段
        if (urlArray.length > 0) {
          for (let i = 0; i < urlArray.length; i++) {
            if (urlArray[i].uid !== '') {
              delete urlArray[i].uid;
            }
            if (urlArray[i].status !== '') {
              delete urlArray[i].status;
            }
          }
        }
      },
      // 保存方法入库数据函数
      saveHomeLike(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveLink();
          } else {
            return false;
          }
        });
      },
      /**
       * 保存或编辑轮播图
       */
      saveLink() {
        // 判断是否上传封面
        if (this.imageFiles.length === 0) {
          this.errorTip('请上传封面照片！');
          return false;
        }
//        // 判断是否输入内容
//        if (this.$refs.ue.getUEContent() === '') {
//          this.errorTip('请输入内容!');
//          return false;
//        }
        this.addHomeLikeForm.id = this.$props.homeLinkId;
        this.addHomeLikeForm.content = this.$refs.ue.getUEContent();
        this.ajax({
          type: 'POST',
          url: '/ibs/web/homeLink/save',
          data: this.addHomeLikeForm,
          loading: true,
          success: (res) => {
            if (res.code === 200) {
              this.$emit('closeRefresh');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      }
    }
  };
</script>
<style>
  .page-carousel .baseDiv {
    display: flex;
    flex-wrap: wrap;
    width: 958px;
    height: 730px;
    border: 1px solid #e5e5e5;
    background-color: white
  }

  .page-carousel .baseDiv .el-form-item {
    display: inline-block;
    width: 420px;
    margin-left: 50px;
  }

  .page-carousel .baseDiv .el-form-item .el-input {
    width: 400px;
  }

  .addForm {
    margin-top: 10px;
    margin-left: -20px;
    /*width:1000px;*/
  }

  .el-form-item .el-form-item__error {
    /*padding-top: 36px;*/
    /*margin-left: -60px;*/
  }

  .btnFrameClass {
    margin-left: 350px;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .singleBtnClass {
    width: 140px;
    height: 40px;
  }

  .selectclass {
    width: 30rem;
  }
</style>
